<template>
  <div class="header">
    <div class="header-main" v-for="item of indexiconList" :key="item.id" @click="routeTo(item)">
        <div class="index-icon-img" >
          <img class="index-icon-img-content" :src="item.imgUrl" />
        </div>
        <p class="index-icon-desc">{{item.desc}}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'Index',
  data() {
    return {
      indexiconList: [],
    };
  },
  methods: {
    getIndexInfo() {
      axios.get("/api/index.json").then(this.getIndexInfoSucc);
    },
    getIndexInfoSucc(res) {
      res = res.data;
      if (res.ret && res.data) {
        const data = res.data;
        this.indexiconList = data.indexiconList;
      }
    },
    routeTo(items) {
        this.$router.push(items.link)
    }
  },
  mounted() {
    this.getIndexInfo();
  }
};
</script>
<style lang="stylus" scoped>
@impor '@/assets/styles/varibles.styl';
.header {
  margin-top: 0.5rem;
}

.header-main {
  position: relative;
  overflow: hidden;
  float: left;
  width: 25%;
  height: 0;
  padding-bottom: 25%;
}

.index-icon-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.44rem;
  box-sizing: border-bos;
  padding: 0.1rem;
}

.index-icon-img-content {
  display: block;
  margin: 0 auto;
  height: 100%;
}

.index-icon-desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;
  color: $darkTextColor;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color #000
}
</style>